<template>
	<div class="order layout-pd">
		<section>
			<el-container class="mb15">
				<el-row :gutter="15">
					<!-- 基础信息 -->
					<el-col :xs="14" :sm="14" :md="14" :lg="14" :xl="14" class="order-info">
						<el-card shadow="hover" style="height: 400px;">
							<template #header>
								<span>基础信息</span>
							</template>
							<div class="order-info-box" style="display:flex">
								<div class="mr20">
									<el-image style="width:128px; height: 128px;border-radius: 5px;"
										src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500"
										fit="cover" />
								</div>
								<el-form :model="state.orderData"  label-width="120px" label-position="left">
									<el-row>
										<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
											<el-row :gutter="35">
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="用户ID:">
														<span>{{ state.orderData.userId }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="姓名:">
														<span>{{ state.orderData.order?.alterTime }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="昵称">
														<span>{{ state.orderData.order?.createdTime }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="性别">
														<span>{{ state.orderData.order?.payStatus }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="年龄">
														<span>{{ state.orderData.order?.device }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="生日">
														<span>{{ state.orderData.order?.source }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="手机号1">
														<span>{{ state.orderData.order?.store }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="手机号2">
														<span>{{ state.orderData.order?.createdBy }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="手机号3">
														<span>{{ state.orderData.order?.ip }}</span>
													</el-form-item>
												</el-col>

												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="会员等级">
														<span>{{ state.orderData.order?.source }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="会员来源">
														<span>{{ state.orderData.order?.store }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="推荐人">
														<span>{{ state.orderData.order?.createdBy }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="付费会员">
														<span>{{ state.orderData.order?.ip }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="开通渠道">
														<span>{{ state.orderData.order?.ip }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="归属会员">
														<span>{{ state.orderData.order?.ip }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="归属门店">
														<span>{{ state.orderData.order?.ip }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="注册时间">
														<span>{{ state.orderData.order?.ip }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
													<el-form-item label="上次到店">
														<span>{{ state.orderData.order?.ip }}</span>
													</el-form-item>
												</el-col>
											</el-row>
										</el-col>
									</el-row>
								</el-form>
							</div>
						</el-card>
					</el-col>
					<el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10" class="order-info">
						<el-row :gutter="15">
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb15">
								<el-card shadow="hover" style="height: 235px;">
									<template #header>
										<span>卡项服务信息</span>
									</template>
									<div class="order-info-box">
										<el-row :gutter="15">
											<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
												<el-card shadow="hover">
													<template #header>
														<span>剩余卡项</span>
													</template>
													<div class="order-info-box">
														<p>计次卡7张总计21次</p>
														<p>计时卡 3张</p>
														<p>计时计次卡3张总计21次</p>
													</div>
												</el-card>
											</el-col>
											<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
												<el-card shadow="hover">
													<template #header>
														<span>服务消耗</span>
													</template>
													<div class="order-info-box">
														<el-row>
															<p>总计服务9次 平均单次服务一个项目</p>
															<p>月到店次数 9次 平均消耗业绩127.67元/次总预约8次，赴约率0%</p>
														</el-row>
													</div>
												</el-card>
											</el-col>
										</el-row>
									</div>
								</el-card>
							</el-col>
							<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
								<el-card shadow="hover" style="height: 150px;">
									<template #header>
										<span>寄存信息</span>
									</template>
									<div class="order-info-box">
										总计寄存5件商品，价值200元
									</div>
								</el-card>
							</el-col>
							<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
								<el-card shadow="hover"  style="height: 150px;">
									<template #header>
										<span>活跃等级</span>
									</template>
									<div class="order-info-box">
										---
									</div>
								</el-card>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-container>
			<el-container>
				<el-row :gutter="15">
					<el-col :xs="14" :sm="14" :md="14" :lg="14" :xl="14" class="order-info" >
						<el-card shadow="hover" style="height: 260px;">
							<template #header>
								<span>综合消费信息</span>
							</template>
							<div class="order-info-box">
								<el-form :model="state.orderData"  label-width="150px" label-position="left">
									<el-row :gutter="15">
										<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
											<el-row :gutter="15">
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="综合消费">
														<span>{{ state.orderData.order?.snkey }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="线上消费">
														<span>{{ state.orderData.order?.alterTime }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="总计欠款/率">
														<span>{{ state.orderData.order?.createdTime }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="负债金额/率">
														<span>{{ state.orderData.order?.payStatus }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="销售消费">
														<span>{{ state.orderData.order?.device }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="销售欠款">
														<span>{{ state.orderData.order?.source }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="划卡消费">
														<span>{{ state.orderData.order?.store }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="换购消费">
														<span>{{ state.orderData.order?.createdBy }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="充值消费">
														<span>{{ state.orderData.order?.ip }}</span>
													</el-form-item>
												</el-col>

												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="充值欠款">
														<span>{{ state.orderData.order?.source }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="会员余额">
														<span>{{ state.orderData.order?.store }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="赠送余额">
														<span>{{ state.orderData.order?.createdBy }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="储值消费">
														<span>{{ state.orderData.order?.ip }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="储值欠款">
														<span>{{ state.orderData.order?.ip }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="可用积分">
														<span>{{ state.orderData.order?.ip }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="可用优惠券金额/数量">
														<span>{{ state.orderData.order?.ip }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="储值卡数量">
														<span>{{ state.orderData.order?.ip }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="储值卡总余额">
														<span>{{ state.orderData.order?.ip }}</span>
													</el-form-item>
												</el-col>
												<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
													<el-form-item label="储值卡总赠余">
														<span>{{ state.orderData.order?.ip }}</span>
													</el-form-item>
												</el-col>
											</el-row>
										</el-col>
									</el-row>
								</el-form>
							</div>
						</el-card>
					</el-col>
					<el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5" class="order-info">
						<el-card shadow="hover"  style="height: 260px;">
							<template #header>
								<span>排行榜</span>
							</template>
							<div class="order-info-box">
								<p>综合消费：总部NO.1 门店NO.8</p>
								<p>累计消费：总部NO.1 门店NO.8</p>
								<p>累计储值：总部NO.1 门店NO.8</p>
								<p>服务次数：总部NO.1 门店NO.8</p>
								<p>消耗业绩：总部NO.1 门店NO.8</p>
								<p>负债金额：总部NO.1 门店NO.8</p>
								<p>剩余积分：总部NO.1 门店NO.8</p>
							</div>
						</el-card>
					</el-col>

					<el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5" class="order-info">
						<el-card shadow="hover"  style="height: 260px;">
							<template #header>
								<span>会员标签</span>
							</template>
							<div class="order-info-box">
								<span>测试会员</span>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</el-container>
		</section>
		<section class="mt15">
			<!-- 账户明细 -->
			<el-row :gutter="20">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="order-info">
					<el-card shadow="hover">
						<template #header>
							<span>账户明细</span>
						</template>
						<el-tabs v-model="state.param.orderType" stretch="true" @tab-click="handleClick">
							<el-tab-pane v-for="item in state.orderType" :label="item.label" :name="item.value"  :key="item.value"></el-tab-pane>
						</el-tabs>
						<section>
							<shengyukaxiang ref="shengyukaxiangRef" v-if="state.param.orderType == 1" />
							<xiaofeidingdan ref="xiaofeidingdanRef" v-if="state.param.orderType == 2" />
							<qiankuandingdan ref="qiankuandingdanRef" v-if="state.param.orderType == 3" />
							<huankuandingdan ref="huankuandingdanRef" v-if="state.param.orderType == 4" />
							<yuyuejilu ref="yuyuejiluRef" v-if="state.param.orderType == 5"  />
							<fuwudingdan ref="fuwudingdanRef" v-if="state.param.orderType == 6"  />
							<jicundingdan ref="jicundingdanRef" v-if="state.param.orderType == 7"  />
							<tuikuandingdan ref="tuikuandingdanRef" v-if="state.param.orderType == 8"  />
							<bulujilu ref="bulujiluRef" v-if="state.param.orderType == 9"  />
							<fenxiaojilu ref="fenxiaojiluRef" v-if="state.param.orderType == 10"  />
							<guoqikaxiang ref="guoqikaxiangRef" v-if="state.param.orderType == 11"  />
							<huiyuanzichan ref="huiyuanzichanRef" v-if="state.param.orderType == 12"  />
							<zichanliushui ref="zichanliushuiRef" v-if="state.param.orderType == 13"  />
						</section>
					</el-card>
				</el-col>
			</el-row>
		</section>
	</div>
</template>

<script setup lang="ts" name="order">
import { reactive, onMounted, ref,defineAsyncComponent } from 'vue';
import { userDetails } from '/@/api/member';
import type { menberDetailsData } from "/@/types/member";
import { useRoute } from 'vue-router';

const shengyukaxiang = defineAsyncComponent(() => import('/@/views/member/statistics/components/shengyukaxiang.vue'));
const xiaofeidingdan = defineAsyncComponent(() => import('/@/views/member/statistics/components/xiaofeidingdan.vue'));
const qiankuandingdan = defineAsyncComponent(() => import('/@/views/member/statistics/components/qiankuandingdan.vue'));
const huankuandingdan = defineAsyncComponent(() => import('/@/views/member/statistics/components/huankuandingdan.vue'));
const yuyuejilu = defineAsyncComponent(() => import('/@/views/member/statistics/components/yuyuejilu.vue'));
const fuwudingdan = defineAsyncComponent(() => import('/@/views/member/statistics/components/fuwudingdan.vue'));
const jicundingdan = defineAsyncComponent(() => import('/@/views/member/statistics/components/jicundingdan.vue'));
const tuikuandingdan = defineAsyncComponent(() => import('/@/views/member/statistics/components/tuikuandingdan.vue'));
const bulujilu = defineAsyncComponent(() => import('/@/views/member/statistics/components/bulujilu.vue'));
const fenxiaojilu = defineAsyncComponent(() => import('/@/views/member/statistics/components/fenxiaojilu.vue'));
const guoqikaxiang = defineAsyncComponent(() => import('/@/views/member/statistics/components/guoqikaxiang.vue'));
const huiyuanzichan = defineAsyncComponent(() => import('/@/views/member/statistics/components/huiyuanzichan.vue'));
const zichanliushui = defineAsyncComponent(() => import('/@/views/member/statistics/components/zichanliushui.vue'));
const shengyukaxiangRef = ref();
const xiaofeidingdanRef = ref();
const qiankuandingdanRef = ref();
const huankuandingdanRef = ref();
const yuyuejiluRef = ref();
const fuwudingdanRef = ref();
const jicundingdanRef = ref();
const tuikuandingdanRef = ref();
const bulujiluRef = ref();
const fenxiaojiluRef = ref();
const guoqikaxiangRef = ref();
const huiyuanzichanRef = ref();
const zichanliushuiRef = ref();

const route = useRoute();
// 定义变量内容
const state = reactive({
	orderForm: {
		name: '',
		email: '',
		autograph: '',
		occupation: '',
		phone: '',
		sex: '',
	},
	orderData: {} as menberDetailsData,
	param: {
		orderType:1,
	},
	orderType:[
		{ value: 1, label: '剩余卡项' },
		{ value: 2, label: '消费订单' },
		{ value: 3, label: '欠款订单' },
		{ value: 4, label: '还款订单' },
		{ value: 5, label: '预约记录' },
		{ value: 6, label: '服务订单' },
		{ value: 7, label: '寄存订单' },
		{ value: 8, label: '退款订单' },
		{ value: 9, label: '补录记录' },
		{ value: 10, label: '分销记录' },
		{ value: 11, label: '过期卡项' },
		{ value: 12, label: '会员资产' },
		{ value: 13, label: '资产流水' },
	]
});


onMounted(async () => {
	const { results } = await userDetails(route.query.id);
	state.orderData = results;
})

// 总个数
const goodNumberFun = (item: Array) => {
	let num = 0
	// item.map((item) => {
	// 	num += item.number
	// })
	return num;
};
// 原件
const amountFun = (num1: any, num2: any) => {
	let num = parseInt(num1) + parseInt(num2);
	let returnValue;
	if (num == 0) {
		returnValue = "-"
	} else {
		returnValue = "￥" + num + "元"
	}
	return returnValue;
};

const handleClick = () => {

}


</script>

<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';

.order {
	.order-user {
		height: 130px;
		display: flex;
		align-items: center;

		.order-user-left {
			width: 100px;
			height: 130px;
			border-radius: 3px;

			:deep(.el-upload) {
				height: 100%;
			}

			.order-user-left-upload {
				img {
					width: 100%;
					height: 100%;
					border-radius: 3px;
				}

				&:hover {
					img {
						animation: logoAnimation 0.3s ease-in-out;
					}
				}
			}
		}

		.order-user-right {
			flex: 1;
			padding: 0 15px;

			.order-title {
				font-size: 18px;
				@include text-ellipsis(1);
			}

			.order-item {
				display: flex;
				align-items: center;
				font-size: 13px;

				.order-item-label {
					color: var(--el-text-color-secondary);
					@include text-ellipsis(1);
				}

				.order-item-value {
					@include text-ellipsis(1);
				}
			}
		}
	}

	.order-info {
		.order-info-more {
			float: right;
			color: var(--el-text-color-secondary);
			font-size: 13px;

			&:hover {
				color: var(--el-color-primary);
				cursor: pointer;
			}
		}

		.order-info-box {
			overflow: hidden;

			.order-info-ul {
				list-style: none;

				.order-info-li {
					font-size: 13px;
					padding-bottom: 10px;

					.order-info-li-title {
						display: inline-block;
						@include text-ellipsis(1);
						color: var(--el-text-color-secondary);
						text-decoration: none;
					}

					& a:hover {
						color: var(--el-color-primary);
						cursor: pointer;
					}
				}
			}
		}
	}

	.order-pay-detail {}

	.goodBox {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		overflow: hidden;

		.goodMsg {
			@include text-ellipsis(2);
		}

		p {
			@include text-ellipsis(1);
		}
	}




	.el-col:last-child {
		border-right: none;
	}

}
</style>
